<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>赵约翰</title>
</head>
<body>
    <link rel="stylesheet" href="./css/swiper.min.css">
</head>
  <style>
    *{
            margin: 0;
            padding: 0;
    }
        
    .q1{
            width: 100%;
            height: 162px;
            display: flex;
            flex-wrap: wrap;
            text-align: center;
    }
    a{
            width: 20%;
            height: 40px;
            text-decoration: none;
        }
    .q1 img{
            width: 40px;
    }
    span{
            display: block;
            justify-content: center;
            color: gray;
            font-size: 14px;
    }
    body {
      position: relative;
      height: 100%;
    }

    body {
      background: #eee;
      font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
      font-size: 14px;
      color: #000;
      margin: 0;
      padding: 0;
        }

    .swiper-container {
      width: 100%;
      height: 100%;
    }

    .swiper-slide {
      text-align: center;
      font-size: 18px;
      background: #fff;
      display: flex;
      -webkit-box-pack: center;
      -ms-flex-pack: center;
      -webkit-justify-content: center;
      justify-content: center;
      -webkit-box-align: center;
      -ms-flex-align: center;
      -webkit-align-items: center;
      align-items: center;
    }
    .w1{
        width: 100%;
        height: 44px;
        background-color: black;
        color: white;
        display: flex;
       
    }
    .w1 li{
        display: flex;
        justify-content: center;
        align-items: center;
    }
    .w1 li:nth-child(1){
        width: 12%;
    }
    .w1 li:nth-child(1) img{
        width: 15px;
    }
    .w1 li:nth-child(2){
        width: 10%;
    }
    .w1 li:nth-child(2) img{
        width: 30px;
    }
    .w1 li:nth-child(3){
        width: 57%;
    }
    .w1 li:nth-child(4){
        width: 25%;
        background-color: brown;
        color: white;
    }



    .w2{
      width: 100%;
      height: 44px;
      background-color: #c82519;
      color: #fff;
      display: flex;
      align-items: center;
    }
    .btn,.denglu{
      width: 40px;
      height: 44px;
    }
    .sousuo{
      flex: 1;
      height: 30px;
      background-color: white;
      border-radius: 15px;
    }
    .denglu{
      display: flex;
      align-items: center;
      justify-content: center;
    }
    .btn span{
      margin: 14px 0 0 15px;
      width: 20px;
      height: 18px;
      display: block;
      background: url(./图片/index.png);
      background-size: 100% 100%;
    }
    .sousuo img{
      width: 20px;
      margin-top: 8px;
      margin-left: 18px;
      float: left;
    }
    .fangdajing{
      width: 20px;
      height: 20px;
      background: url(./图片/sbt.png) no-repeat;
      background-position: -80px 0;
      background-size: 200px;
      margin: 8px 0 0 15px;
      position: relative;
      z-index: 1;
      float: left;
    }
    .jd::after{
      content: '';
      display: block;
      width: 1px;
      height: 15px;
      background-color: gray;
      position: relative;
      left: 30px;
      float: left;
      margin: 8px 0 0 -20px;
    }
    .w4{
      width: 100%;
      height: 50px;
      background-color:#fff;
      position: fixed;
      bottom: 0;
    }
    .w4 a{
      width: 19%;
      height: 100%;
     display: inline-block;
     text-align: center; 
    }
    .w4 img{
      width: 60px;
      height: 46.15px;  
    }

  .w3 {
      width: 80%;
      height: 150px;
      margin: 20px;
      display: flex;
      flex-wrap: wrap;
      text-align: center;

    }
    .w3 a{
            width: 100%;
            height: 200px;
            text-decoration: none;
        }
  .w3 img{
    width: 100%;
    height: 150px;
  }
    </style>
  </style>
</head>

<body>
    <ul class="w1">
        <li><img src="./图片/叉叉.png"></li>
        <li><img src="./图片/京东.png"></li>
        <li>打开京东app，购物轻松又实惠</li>
        <li>立即打开</li>
    </ul>
    </div>

    <div class="w2">
      <div class="btn"><span></span>
    </div>
    <div class="sousuo">
      <div class="jd"></div>
        <img src="./图片/jd.png" alt=""  >
        <div class="jd"></div>
        <div class="fangdajing"></div>
    </div>
      <div class="denglu">登陆</div>
        </div>
      </div>

    <div class="swiper-container">
      <div class="swiper-wrapper">
        <div class="swiper-slide"> 
          <div class="w3">
            <img src="./图片/轮播图4.dpg" alt="">
        </div>
      </div>
      
      <div class="swiper-slide"> 
        <div class="w3">
          <img src="./图片/轮播图1.dpg" alt="">
        </div>
      </div>
      
      <div class="swiper-slide"> 
        <div class="w3">
          <img src="./图片/轮播图2.dpg" alt="">
        </div>
      </div>

      <div class="swiper-slide"> 
        <div class="w3">
          <img src="./图片/轮播图3.dpg" alt="">
        </div>
      </div>
    </div>


  <div class="swiper-container">
    <div class="swiper-wrapper">
        <div class="swiper-slide">
          <div class="q1">
            <a href="javasscript:;"><img src="./图片/1.png" alt=""><span>京东商城</span></a>
            <a href="javasscript:;"><img src="./图片/2.png" alt=""><span>数码电器</span></a>
            <a href="javasscript:;"><img src="./图片/3.png" alt=""><span>京东服饰</span></a>
            <a href="javasscript:;"><img src="./图片/4.png" alt=""><span>东京生鲜</span></a>
            <a href="javasscript:;"><img src="./图片/5.png" alt=""><span>京东到家</span></a>
            <a href="javasscript:;"><img src="./图片/6.png" alt=""><span>充值缴费</span></a>
            <a href="javasscript:;"><img src="./图片/7.png" alt=""><span>9.9元拼</span></a>
            <a href="javasscript:;"><img src="./图片/8.png" alt=""><span>领卷</span></a>
            <a href="javasscript:;"><img src="./图片/9.png" alt=""><span>领金贴</span></a>
            <a href="javasscript:;"><img src="./图片/10.png" alt=""><span>PLUS会员</span></a>
          </div>
        </div>
      <div class="swiper-slide">
        <div class="q1">
          <a href="javasscript:;"><img src="./图片/a1.png" alt=""><span>京东国际</span></a>
          <a href="javasscript:;"><img src="./图片/a2.png" alt=""><span>京东拍卖</span></a>
          <a href="javasscript:;"><img src="./图片/a3.png" alt=""><span>唯品会</span></a>
          <a href="javasscript:;"><img src="./图片/a4.png" alt=""><span>玩3c</span></a>
          <a href="javasscript:;"><img src="./图片/a5.png" alt=""><span>沃尔玛</span></a>
          <a href="javasscript:;"><img src="./图片/a6.png" alt=""><span>美妆馆</span></a>
          <a href="javasscript:;"><img src="./图片/a7.png" alt=""><span>京东旅行</span></a>
          <a href="javasscript:;"><img src="./图片/a8.png" alt=""><span>拍拍二手</span></a>
          <a href="javasscript:;"><img src="./图片/a9.png" alt=""><span>物流查询</span></a>
          <a href="javasscript:;"><img src="./图片/a10.png" alt=""><span>全部</span></a>
        </div>
      </div>
    </div>
  </div>


  </div>
  <script src="./js/swiper.min.js"></script>
  <script>
    var swiper = new Swiper('.swiper-container', {
      pagination: {
        el: '.swiper-pagination',
      },
    });
  </script>
    <div class="w4">
      <a href=""><img src="./图片/d1.png" alt=""></a>
      <a href=""><img src="./图片/d2.png" alt=""></a>
      <a href=""><img src="./图片/d3.png" alt=""></a>
      <a href=""><img src="./图片/d4.png" alt=""></a>
      <a href=""><img src="./图片/d5.png" alt=""></a>
    </div>
</body>
</html>